<template>
    <div class="container">
        <!-- <div class="carousel-panel">
            <el-carousel :interval="2500" type="card" height="300px" autoplay>
                <el-carousel-item v-for="(img, index) in images" :key="index">
                    <img :src="img" alt="carousel image" class="carousel-image" />
                </el-carousel-item>
            </el-carousel>
        </div> -->
        <div class="top-panel">
            <div class="info-box-1">
                <img src="@/static/icons/person.png" class="info-icon" />
                <div class="info-content">
                    <span class="info-data">2193</span>
                    <span class="info-text">注册用户</span>
                </div>
            </div>
            <div class="info-box-1">
                <img src="@/static/icons/标签.png" class="info-icon" />
                <div class="info-content">
                    <span class="info-data">19930</span>
                    <span class="info-text">检测次数</span>
                </div>
            </div>

            <div class="info-box-1">
                <img src="@/static/icons/公告.png" class="info-icon" />
                <div class="info-content">
                    <span class="info-data">3</span>
                    <span class="info-text">消息通知</span>
                </div>
            </div>
            <div class="info-box-1">
                <img src="@/static/icons/分类.png" class="info-icon" />
                <div class="info-content">
                    <span class="info-data">24h</span>
                    <span class="info-text">发行时间</span>
                </div>
            </div>
        </div>
        <div class="middle-panel">
            <div class="chart-box" ref="dynamicChart"></div>
            <div class="chart-box" ref="roseChart"></div>
            <div class="calendar-box">
                <el-calendar v-model="value" @click.native="handleDateClick"></el-calendar>
            </div>
        </div>
        <div class="bottom-panel">
            <div class="info-box-2">
                <h3>用户评价</h3>
                <el-divider></el-divider>
                <div class="review-item">
                    <p>实用性</p>
                    <el-progress :percentage="90" color="#dde497"></el-progress>
                </div>
                <div class="review-item">
                    <p>可靠性</p>
                    <el-progress :percentage="70" color="#67c23a"></el-progress>
                </div>
                <div class="review-item">
                    <p>易用性</p>
                    <el-progress :percentage="85" color="#409eff"></el-progress>
                </div>
                <div class="review-item">
                    <p>性能</p>
                    <el-progress :percentage="80" color="#e6a23c"></el-progress>
                </div>
            </div>

            <div class="info-box-3">
                <div class="news-header">
                    <h3>资讯信息</h3>
                    <el-link href="http://cfnews.com.cn/" type="primary" class="more-link">更多</el-link>
                </div>
                <el-divider></el-divider>
                <ul class="news-list">
                    <li v-for="(news, index) in newsList" :key="index" class="news-item">
                        <span class="arrow">•</span>
                        <el-link :href="news.url" target="_blank" class="news-title">
                            {{ news.title }}
                        </el-link>
                        <span class="news-date">{{ formatDate(news.publish_time) }}</span>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 添加弹窗组件 -->
        <el-dialog
            title="检测数据详情"
            :visible.sync="dialogVisible"
            width="90%"
            :modal-append-to-body="false"
            :append-to-body="true"
            custom-class="detection-dialog">
            <el-tabs v-model="activeTab">
                <el-tab-pane label="实时检测" name="realtime">
                    <div class="detail-content">
                        <div class="detail-layout">
                            <!-- 左侧表格区域 -->
                            <div class="table-section">
                                <div class="statistics-section">
                                    <h4>统计概览</h4>
                                    <div class="statistics-grid">
                                        <div class="stat-item">
                                            <span class="label">总检测次数：</span>
                                            <span class="value">{{ realtimeData.total_detections }}</span>
                                        </div>
                                        <div class="stat-item">
                                            <span class="label">检测类别：</span>
                                            <span class="value">{{ Object.keys(realtimeData.class_statistics || {}).length }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="details-section">
                                    <h4>检测详情</h4>
                                    <el-table :data="realtimeData.detection_details" style="width: 100%" border>
                                        <el-table-column prop="class_name" label="检测类别" width="120"></el-table-column>
                                        <el-table-column prop="start_time" label="开始时间" width="180"></el-table-column>
                                        <el-table-column prop="end_time" label="结束时间" width="180"></el-table-column>
                                        <el-table-column prop="confidence" label="置信度" width="120">
                                            <template slot-scope="scope">
                                                {{ (scope.row.confidence * 100).toFixed(1) }}%
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="created_at" label="创建时间" width="180"></el-table-column>
                                    </el-table>
                                </div>
                            </div>
                            <!-- 右侧图表区域 -->
                            <div class="charts-section">
                                <div ref="realtimePieChart" class="chart-item"></div>
                                <div ref="realtimeBarChart" class="chart-item"></div>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="视频检测" name="video">
                    <div class="detail-content">
                        <div class="detail-layout">
                            <!-- 左侧表格区域 -->
                            <div class="table-section">
                                <div class="statistics-section">
                                    <h4>统计概览</h4>
                                    <div class="statistics-grid">
                                        <div class="stat-item">
                                            <span class="label">总检测次数：</span>
                                            <span class="value">{{ videoData.total_detections }}</span>
                                        </div>
                                        <div class="stat-item">
                                            <span class="label">检测类别：</span>
                                            <span class="value">{{ Object.keys(videoData.class_statistics || {}).length }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="details-section">
                                    <h4>检测详情</h4>
                                    <el-table :data="videoData.detection_details" style="width: 100%" border>
                                        <el-table-column prop="class_name" label="检测类别" width="120"></el-table-column>
                                        <el-table-column prop="start_time" label="开始时间" width="120"></el-table-column>
                                        <el-table-column prop="end_time" label="结束时间" width="120"></el-table-column>
                                        <el-table-column prop="confidence" label="置信度" width="120">
                                            <template slot-scope="scope">
                                                {{ (scope.row.confidence * 100).toFixed(1) }}%
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="video_info.video_name" label="视频名称" width="180"></el-table-column>
                                        <el-table-column prop="video_info.uploaded_at" label="上传时间" width="180"></el-table-column>
                                    </el-table>
                                </div>
                            </div>
                            <!-- 右侧图表区域 -->
                            <div class="charts-section">
                                <div ref="videoPieChart" class="chart-item"></div>
                                <div ref="videoBarChart" class="chart-item"></div>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>

<script>
import { getNews } from '@/api/news'
import * as echarts from 'echarts'
import { getDayRealtimeData, getDayVideoData } from '@/api/data'

export default {
    data() {
        return {
            value: new Date(),
            newsList: [],
            images: [
                require('@/static/home/food_safety1.png'),
                require('@/static/home/food_safety2.png'),
                require('@/static/home/food_safety5.png'),
                require('@/static/home/food_safety4.png')
            ],
            dialogVisible: false,
            activeTab: 'realtime',
            realtimeData: {
                total_detections: 0,
                class_statistics: {},
                detection_details: []
            },
            videoData: {
                total_detections: 0,
                class_statistics: {},
                detection_details: []
            },
            realtimeMessage: '',
            videoMessage: '',
            realtimePieChart: null,
            realtimeBarChart: null,
            videoPieChart: null,
            videoBarChart: null,
            resizeObserver: null,
        }
    },
    mounted() {
        this.fetchNews()
        this.initDynamicChart()
        this.initRoseChart()
    },
    methods: {
        async fetchNews() {
            try {
                const response = await getNews()
                if (response && response.code === 1) {
                    this.newsList = response.data || []
                } else {
                    this.$message.error((response && response.msg) || '获取新闻失败')
                }
            } catch (error) {
                console.error("获取新闻失败:", error)
                this.$message.error('获取新闻失败')
            }
        },
        formatDate(dateString) {
            if (!dateString) return ''
            const date = new Date(dateString)
            return `${date.getMonth() + 1}-${date.getDate()}`
        },
        initDynamicChart() {
            // 生成最近7天的日期
            const categories = (function () {
                let res = [];
                let now = new Date();
                for (let i = 6; i >= 0; i--) {
                    let date = new Date(now);
                    date.setDate(date.getDate() - i);
                    res.push(date.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' }));
                }
                return res;
            })();

            // 模拟检测数据
            const detectionData = [120, 132, 101, 134, 90, 230, 210];
            const violationData = [20, 32, 21, 34, 19, 30, 21];

            this.dynamicChart = echarts.init(this.$refs.dynamicChart);
            this.dynamicChart.setOption({
                title: { 
                    text: '近7天检测数据统计',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#283b56'
                        }
                    }
                },
                legend: {
                    data: ['检测次数', '违规次数'],
                    top: 30
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: { readOnly: false },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: categories
                },
                yAxis: {
                    type: 'value',
                    name: '次数'
                },
                series: [
                    {
                        name: '检测次数',
                        type: 'line',
                        data: detectionData,
                        smooth: true,
                        lineStyle: {
                            width: 3,
                            color: '#409EFF'
                        },
                        itemStyle: {
                            color: '#409EFF'
                        }
                    },
                    {
                        name: '违规次数',
                        type: 'line',
                        data: violationData,
                        smooth: true,
                        lineStyle: {
                            width: 3,
                            color: '#F56C6C'
                        },
                        itemStyle: {
                            color: '#F56C6C'
                        }
                    }
                ]
            });

            // 自动更新数据
            setInterval(() => {
                const newDate = new Date();
                categories.shift();
                categories.push(newDate.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' }));
                
                detectionData.shift();
                violationData.shift();
                
                // 生成新的随机数据，但保持在合理范围内
                detectionData.push(Math.floor(Math.random() * 100 + 150));
                violationData.push(Math.floor(Math.random() * 20 + 15));

                this.dynamicChart.setOption({
                    xAxis: {
                        data: categories
                    },
                    series: [
                        { data: detectionData },
                        { data: violationData }
                    ]
                });
            }, 5000);
        },
        initRoseChart() {
            const roseChart = echarts.init(this.$refs.roseChart);
            const option = {
                title: {
                    text: '违规行为类型分布',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    top: 'bottom',
                    data: ['未戴口罩', '未戴帽子', '未穿工作服', '吸烟', '玩手机', '其他违规']
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: { show: true, readOnly: false },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                series: [
                    {
                        name: '违规类型',
                        type: 'pie',
                        radius: ['30%', '70%'],
                        center: ['50%', '45%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 8
                        },
                        data: [
                            { value: 40, name: '未戴口罩' },
                            { value: 38, name: '未戴帽子' },
                            { value: 32, name: '未穿工作服' },
                            { value: 30, name: '吸烟' },
                            { value: 28, name: '玩手机' },
                            { value: 26, name: '其他违规' }
                        ],
                        label: {
                            show: true,
                            formatter: '{b}: {d}%'
                        }
                    }
                ]
            };
            roseChart.setOption(option);

            // 自动更新数据
            setInterval(() => {
                const newData = option.series[0].data.map(item => ({
                    ...item,
                    value: Math.floor(Math.random() * 20 + item.value - 10)
                }));
                
                roseChart.setOption({
                    series: [{
                        data: newData
                    }]
                });
            }, 5000);
        },
        async handleDateClick(event) {
            const target = event.target;
            if (target.classList.contains('el-calendar-day')) {
                const date = this.value;
                const formattedDate = this.formatDateForAPI(date);
                
                try {
                    // 获取实时检测数据
                    const realtimeResponse = await getDayRealtimeData(formattedDate);
                    if (realtimeResponse.code === 1) {
                        if (realtimeResponse.data.total_detections === 0) {
                            this.$message.info(realtimeResponse.msg);
                            return;
                        }
                        this.realtimeData = realtimeResponse.data;
                        this.dialogVisible = true;
                        this.activeTab = 'realtime';
                        // 等待DOM更新后初始化图表
                        this.$nextTick(() => {
                            this.initRealtimeCharts();
                        });
                    }
                    
                    // 获取视频检测数据
                    const videoResponse = await getDayVideoData(formattedDate);
                    if (videoResponse.code === 1) {
                        if (videoResponse.data.total_detections === 0) {
                            this.$message.info(videoResponse.msg);
                            return;
                        }
                        this.videoData = videoResponse.data;
                        // 等待DOM更新后初始化图表
                        this.$nextTick(() => {
                            this.initVideoCharts();
                        });
                    }
                } catch (error) {
                    console.error('获取检测数据失败:', error);
                    this.$message.error('获取检测数据失败');
                }
            }
        },
        formatDateForAPI(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        },
        // 监听标签页切换
        watch: {
            activeTab(newVal) {
                this.$nextTick(() => {
                    if (newVal === 'realtime') {
                        this.initRealtimeCharts();
                    } else {
                        this.initVideoCharts();
                    }
                });
            },
            dialogVisible(newVal) {
                if (!newVal) {
                    // 弹窗关闭时清理图表实例
                    if (this.realtimePieChart) {
                        this.realtimePieChart.dispose();
                        this.realtimePieChart = null;
                    }
                    if (this.realtimeBarChart) {
                        this.realtimeBarChart.dispose();
                        this.realtimeBarChart = null;
                    }
                    if (this.videoPieChart) {
                        this.videoPieChart.dispose();
                        this.videoPieChart = null;
                    }
                    if (this.videoBarChart) {
                        this.videoBarChart.dispose();
                        this.videoBarChart = null;
                    }
                    if (this.resizeObserver) {
                        this.resizeObserver.disconnect();
                        this.resizeObserver = null;
                    }
                }
            }
        },
        // 初始化实时检测图表
        initRealtimeCharts() {
            if (!this.$refs.realtimePieChart || !this.$refs.realtimeBarChart) return;
            
            const classStats = this.realtimeData.class_statistics;
            const data = Object.entries(classStats).map(([name, value]) => ({
                name,
                value
            }));

            // 清理旧的图表实例
            if (this.realtimePieChart) {
                this.realtimePieChart.dispose();
                this.realtimePieChart = null;
            }
            if (this.realtimeBarChart) {
                this.realtimeBarChart.dispose();
                this.realtimeBarChart = null;
            }

            // 初始化饼图
            this.realtimePieChart = echarts.init(this.$refs.realtimePieChart);
            this.realtimePieChart.setOption({
                title: {
                    text: '检测物体分布',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: data.map(item => item.name)
                },
                series: [{
                    name: '检测数量',
                    type: 'pie',
                    radius: '50%',
                    data: data,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            });

            // 初始化柱状图
            this.realtimeBarChart = echarts.init(this.$refs.realtimeBarChart);
            this.realtimeBarChart.setOption({
                title: {
                    text: '检测物体数量统计',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: data.map(item => item.name),
                    axisLabel: {
                        interval: 0,
                        rotate: 30
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '检测次数',
                    minInterval: 1,
                    min: 0,
                    max: Math.max(6, Math.max(...data.map(item => item.value))),
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed'
                        }
                    }
                },
                series: [{
                    name: '检测次数',
                    type: 'bar',
                    data: data.map(item => item.value),
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#83bff6' },
                            { offset: 0.5, color: '#188df0' },
                            { offset: 1, color: '#188df0' }
                        ])
                    }
                }]
            });

            // 使用 ResizeObserver 监听容器大小变化
            if (this.resizeObserver) {
                this.resizeObserver.disconnect();
            }
            this.resizeObserver = new ResizeObserver(() => {
                this.realtimePieChart && this.realtimePieChart.resize();
                this.realtimeBarChart && this.realtimeBarChart.resize();
            });
            this.resizeObserver.observe(this.$refs.realtimePieChart);
            this.resizeObserver.observe(this.$refs.realtimeBarChart);
        },

        // 初始化视频检测图表
        initVideoCharts() {
            if (!this.$refs.videoPieChart || !this.$refs.videoBarChart) return;
            
            const classStats = this.videoData.class_statistics;
            const data = Object.entries(classStats).map(([name, value]) => ({
                name,
                value
            }));

            // 清理旧的图表实例
            if (this.videoPieChart) {
                this.videoPieChart.dispose();
                this.videoPieChart = null;
            }
            if (this.videoBarChart) {
                this.videoBarChart.dispose();
                this.videoBarChart = null;
            }

            // 初始化饼图
            this.videoPieChart = echarts.init(this.$refs.videoPieChart);
            this.videoPieChart.setOption({
                title: {
                    text: '检测物体分布',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: data.map(item => item.name)
                },
                series: [{
                    name: '检测数量',
                    type: 'pie',
                    radius: '50%',
                    data: data,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            });

            // 初始化柱状图
            this.videoBarChart = echarts.init(this.$refs.videoBarChart);
            this.videoBarChart.setOption({
                title: {
                    text: '检测物体数量统计',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: data.map(item => item.name),
                    axisLabel: {
                        interval: 0,
                        rotate: 30
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '检测次数',
                    minInterval: 1,
                    min: 0,
                    max: Math.max(6, Math.max(...data.map(item => item.value))),
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed'
                        }
                    }
                },
                series: [{
                    name: '检测次数',
                    type: 'bar',
                    data: data.map(item => item.value),
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#83bff6' },
                            { offset: 0.5, color: '#188df0' },
                            { offset: 1, color: '#188df0' }
                        ])
                    }
                }]
            });

            // 使用 ResizeObserver 监听容器大小变化
            if (this.resizeObserver) {
                this.resizeObserver.disconnect();
            }
            this.resizeObserver = new ResizeObserver(() => {
                this.videoPieChart && this.videoPieChart.resize();
                this.videoBarChart && this.videoBarChart.resize();
            });
            this.resizeObserver.observe(this.$refs.videoPieChart);
            this.resizeObserver.observe(this.$refs.videoBarChart);
        },
    },
    beforeDestroy() {
        // 清理所有图表实例
        if (this.dynamicChart) {
            this.dynamicChart.dispose();
            this.dynamicChart = null;
        }
        if (this.roseChart) {
            this.roseChart.dispose();
            this.roseChart = null;
        }
        if (this.realtimePieChart) {
            this.realtimePieChart.dispose();
            this.realtimePieChart = null;
        }
        if (this.realtimeBarChart) {
            this.realtimeBarChart.dispose();
            this.realtimeBarChart = null;
        }
        if (this.videoPieChart) {
            this.videoPieChart.dispose();
            this.videoPieChart = null;
        }
        if (this.videoBarChart) {
            this.videoBarChart.dispose();
            this.videoBarChart = null;
        }
        // 清理 ResizeObserver
        if (this.resizeObserver) {
            this.resizeObserver.disconnect();
            this.resizeObserver = null;
        }
    }
}
</script>


<style scoped>
.container {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background-color: #f0f0f0;
    height: 100vh;
    box-sizing: border-box;
}

.carousel-panel {
    margin-bottom: 20px;
}

.top-panel {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.info-box-1 {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 23%;
    height: 100px;
    display: flex;
    /* justify-content: center; */
    align-items: center;
}

.info-icon {
    width: 50px;
    height: 50px;
    margin-right: 30px;
    margin-left: 40px;
}

.info-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.info-data {
    font-size: 24px;
    font-weight: bold;
    color: #3a3939;
}

.info-text {
    font-size: 14px;
    color: #7d7d7d;
}

.middle-panel {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.chart-box {
    flex: 1;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    height: 350px;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.calendar-box {
    flex: 1;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
}

.el-calendar {
    width: 100%;
    height: 100%;
}

.calendar-box/deep/.el-calendar-day {
    width: 100%;
    height: 32px;
    text-align: center;
}

.bottom-panel {
    display: flex;
    justify-content: space-between;
}

.info-box-2,
.info-box-3 {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 10px;
}

.info-box-2 {
    flex: 2;
    margin-right: 10px;
}

.info-box-3 {
    flex: 1;
    overflow-y: auto;
}

.news-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.news-list {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
}

.news-item {
    align-items: flex-start;
    margin-bottom: 5px;
}

.arrow {
    margin-right: 5px;
    color: #888;
}

.news-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    padding-left: 5px;
}

.news-date {
    color: #888;
    margin-left: 10px;
    font-size: 12px;
    width: 40px;
    text-align: right;
}

.carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.more-link {
    font-size: 14px;
}


.review-item {
    margin-bottom: 15px;
}

.data-container {
    padding: 20px;
}

.statistics-section {
    margin-bottom: 12px;
}

.statistics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.stat-item {
    background-color: #f5f7fa;
    padding: 10px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

.stat-item .label {
    color: #606266;
    font-size: 13px;
    margin-bottom: 5px;
}

.stat-item .value {
    color: #303133;
    font-size: 20px;
    font-weight: bold;
}

.details-section {
    margin-top: 20px;
}

.details-section h4 {
    margin-bottom: 10px;
    color: #303133;
    font-size: 14px;
}

.el-dialog__body {
    padding: 16px;
}

.no-data-message {
    text-align: center;
    padding: 40px;
    font-size: 16px;
    color: #909399;
}

/* 添加新的样式 */
.detail-content {
    height: 500px;
    overflow: hidden;
}

.detail-layout {
    display: flex;
    gap: 24px;
    height: 100%;
}

.table-section {
    flex: 1;
    overflow-y: auto;
    padding-right: 12px;
}

.charts-section {
    width: 500px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chart-item {
    flex: 1;
    min-height: 200px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    padding: 12px;
    width: 100%;
    height: 200px;
}

/* 弹窗样式优化 */
:deep(.detection-dialog) {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 80vh;
}

:deep(.detection-dialog .el-dialog__body) {
    flex: 1;
    overflow: hidden;
    padding: 16px;
}

:deep(.detection-dialog .el-tabs__content) {
    height: calc(100% - 40px);
    overflow: hidden;
}

:deep(.detection-dialog .el-tab-pane) {
    height: 100%;
}

:deep(.el-dialog__header) {
    padding: 16px;
    margin: 0;
    border-bottom: 1px solid #e4e7ed;
}

:deep(.el-dialog__title) {
    font-size: 16px;
    font-weight: 500;
}

:deep(.el-dialog__headerbtn) {
    top: 16px;
}

/* 自定义滚动条样式 */
.table-section::-webkit-scrollbar {
    width: 6px;
}

.table-section::-webkit-scrollbar-thumb {
    background-color: #C0C4CC;
    border-radius: 3px;
}

.table-section::-webkit-scrollbar-track {
    background-color: #f5f7fa;
}

/* 调整表格样式 */
:deep(.el-table) {
    font-size: 13px;
}

:deep(.el-table th) {
    padding: 8px 0;
}

:deep(.el-table td) {
    padding: 8px 0;
}
</style>
